<template>
  <Profile
    :authorized="$hasAnyPermissions([
      'system:settings:theme'
    ])"
  >
    <div class="page">
      <div class="page-wrap">
        <h2>系统设置</h2>
        <el-tabs v-model="activeTab">
          <el-tab-pane
            v-if="$hasAnyPermissions(['system:settings:theme'])"
            name="theme_settings" label="主题设置"
          >
            <ThemeSettingsForm />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </Profile>
</template>

<script>
import Profile from '@/components/layout/Profile'
import ThemeSettingsForm from '@/components/system/settings/ThemeSettingsForm'

export default {
  components: { Profile, ThemeSettingsForm },
  data () {
    return {
      activeTab: 'theme_settings'
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  padding: var(--gap);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;

  .page-wrap {
    margin: 0 auto;
    background-color: var(--color-light);
    padding: 30px;
    border-radius: 10px;
    h2 {
      margin-bottom: 20px;
    }
    :deep(.el-input-number) {
      width: 100%;
      .el-input__inner {
        text-align: left;
      }
    }
  }
}
</style>
